<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业微信接入演示</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        h1, h2 {
            color: #333;
        }
        .container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }
        .card {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            padding: 20px;
            flex: 1;
            min-width: 300px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input, select {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        button {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
        }
        button:hover {
            background-color: #45a049;
        }
        .result {
            background: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 15px;
            margin-top: 15px;
            white-space: pre-wrap;
            font-family: monospace;
            max-height: 400px;
            overflow-y: auto;
        }
        .nav-links {
            margin-bottom: 20px;
        }
        .nav-links a {
            margin-right: 15px;
            color: #4CAF50;
            text-decoration: none;
        }
        .nav-links a:hover {
            text-decoration: underline;
        }
        .config-section {
            background: #e8f5e8;
            padding: 15px;
            border-radius: 4px;
            margin-bottom: 20px;
        }
        .api-endpoint {
            background: #f0f8ff;
            padding: 10px;
            border-radius: 4px;
            margin: 10px 0;
            font-family: monospace;
        }
    </style>
</head>
<body>
    <h1>企业微信接入演示</h1>
    
    <div class="nav-links">
        <a href="/">首页</a>
        <a href="/stats">统计页面</a>
        <a href="/sources">脚本来源管理</a>
        <a href="/wework-demo">企业微信演示</a>
    </div>
    
    <div class="config-section">
        <h3>📋 企业微信配置状态</h3>
        <p><strong>企业ID:</strong> <span id="corpId">未配置</span></p>
        <p><strong>应用ID:</strong> <span id="agentId">未配置</span></p>
        <p><strong>应用Secret:</strong> <span id="secret">未配置</span></p>
        <p><em>请在 .env 文件中配置企业微信相关参数</em></p>
    </div>
    
    <div class="container">
        <div class="card">
            <h2>🔗 API 接口测试</h2>
            <div class="form-group">
                <label for="hoursSelect">时间范围（小时）:</label>
                <select id="hoursSelect">
                    <option value="1">过去1小时</option>
                    <option value="6">过去6小时</option>
                    <option value="24" selected>过去24小时</option>
                    <option value="72">过去3天</option>
                    <option value="168">过去7天</option>
                </select>
            </div>
            <div class="form-group">
                <label for="scriptSourceSelect">脚本来源筛选:</label>
                <select id="scriptSourceSelect">
                    <option value="">全部来源</option>
                    <option value="game_client_v1">game_client_v1</option>
                    <option value="game_client_v2">game_client_v2</option>
                    <option value="mini_game_client">mini_game_client</option>
                </select>
            </div>
            <button onclick="fetchWeworkData()">获取企业微信数据</button>
            <button onclick="testCallback()">测试回调接口</button>
            
            <div class="api-endpoint">
                <strong>当前API地址:</strong><br>
                <span id="currentApiUrl">GET /api/wework/data?hours=24</span>
            </div>
            
            <div id="apiResult" class="result" style="display: none;"></div>
        </div>
        
        <div class="card">
            <h2>📊 数据预览</h2>
            <div id="dataPreview">
                <p>点击"获取企业微信数据"按钮查看数据</p>
            </div>
        </div>
    </div>
    
    <div class="card">
        <h2>📖 接入说明</h2>
        <h3>1. 配置步骤</h3>
        <ol>
            <li>在企业微信管理后台创建自建应用</li>
            <li>获取企业ID、应用ID和应用Secret</li>
            <li>在 .env 文件中配置相关参数</li>
            <li>设置企业微信应用的可信域名</li>
            <li>配置接收消息URL（可选）</li>
        </ol>
        
        <h3>2. API 接口</h3>
        <div class="api-endpoint">
            <strong>数据接口:</strong> GET/POST /api/wework/data<br>
            <strong>参数:</strong> hours（时间范围）, script_source（脚本来源筛选）
        </div>
        <div class="api-endpoint">
            <strong>验证回调:</strong> GET /api/wework/callback<br>
            <strong>消息回调:</strong> POST /api/wework/callback
        </div>
        
        <h3>3. 使用示例</h3>
        <pre><code>// JavaScript 调用示例
fetch('/api/wework/data?hours=24&script_source=game_client_v1')
  .then(response => response.json())
  .then(data => {
    console.log('标题:', data.title);
    console.log('总事件数:', data.summary.total_events);
    data.items.forEach(item => {
      console.log(`${item.name}: ${item.value}`);
    });
  });</code></pre>
    </div>
    
    <script>
        // 更新API URL显示
        function updateApiUrl() {
            const hours = document.getElementById('hoursSelect').value;
            const scriptSource = document.getElementById('scriptSourceSelect').value;
            
            let url = `/api/wework/data?hours=${hours}`;
            if (scriptSource) {
                url += `&script_source=${scriptSource}`;
            }
            
            document.getElementById('currentApiUrl').textContent = `GET ${url}`;
        }
        
        // 获取企业微信数据
        async function fetchWeworkData() {
            const hours = document.getElementById('hoursSelect').value;
            const scriptSource = document.getElementById('scriptSourceSelect').value;
            
            let url = `/api/wework/data?hours=${hours}`;
            if (scriptSource) {
                url += `&script_source=${scriptSource}`;
            }
            
            try {
                const response = await fetch(url);
                const data = await response.json();
                
                // 显示原始JSON数据
                document.getElementById('apiResult').style.display = 'block';
                document.getElementById('apiResult').textContent = JSON.stringify(data, null, 2);
                
                // 显示格式化的数据预览
                displayDataPreview(data);
                
            } catch (error) {
                document.getElementById('apiResult').style.display = 'block';
                document.getElementById('apiResult').textContent = `错误: ${error.message}`;
            }
        }
        
        // 显示数据预览
        function displayDataPreview(data) {
            const preview = document.getElementById('dataPreview');
            
            let html = `
                <h3>${data.title}</h3>
                <p><strong>描述:</strong> ${data.description}</p>
                <p><strong>生成时间:</strong> ${data.generated_at}</p>
                
                <h4>📈 总体统计</h4>
                <ul>
                    <li>总事件数: ${data.summary.total_events}</li>
                    <li>独立用户数: ${data.summary.unique_users}</li>
                    <li>独立会话数: ${data.summary.unique_sessions}</li>
                    <li>脚本来源数: ${data.summary.script_sources}</li>
                </ul>
                
                <h4>📋 详细事件</h4>
            `;
            
            if (data.items && data.items.length > 0) {
                html += '<ul>';
                data.items.forEach(item => {
                    html += `<li><strong>${item.name}:</strong> ${item.value} (最后发生: ${item.timestamp})</li>`;
                });
                html += '</ul>';
            } else {
                html += '<p>暂无事件数据</p>';
            }
            
            preview.innerHTML = html;
        }
        
        // 测试回调接口
        async function testCallback() {
            try {
                const response = await fetch('/api/wework/callback');
                const result = await response.text();
                
                document.getElementById('apiResult').style.display = 'block';
                document.getElementById('apiResult').textContent = `回调测试结果: ${result}`;
                
            } catch (error) {
                document.getElementById('apiResult').style.display = 'block';
                document.getElementById('apiResult').textContent = `回调测试错误: ${error.message}`;
            }
        }
        
        // 监听选择框变化
        document.getElementById('hoursSelect').addEventListener('change', updateApiUrl);
        document.getElementById('scriptSourceSelect').addEventListener('change', updateApiUrl);
        
        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            updateApiUrl();
            
            // 检查配置状态（这里只是示例，实际应该从后端获取）
            document.getElementById('corpId').textContent = '请在.env文件中配置';
            document.getElementById('agentId').textContent = '请在.env文件中配置';
            document.getElementById('secret').textContent = '请在.env文件中配置';
        });
    </script>
</body>
</html>